<template>
    <div class="home">
        <div class="category">
            <h2>SHUN-Z</h2>
            <ul>
                <li v-for="item in categoryList" :key="item.id" @click="testList(item)"
                    :class="id == item.id ? 'active' : ''">
                    <img :src="http.host + item.icon">
                    <p> {{ item.text }}</p>
                </li>
            </ul>
        </div>
        <div class="exam-list">
            <ul>
                <!-- 携带参数跳转到详情页 -->
                <li v-for="item in examlist" @click="toDerails(item)" :key="item.eid">
                    <van-icon name="records-o" />
                    <span>{{ item.name }}</span>
                </li>
            </ul>
        </div>
    </div>
</template>
<style lang="less" scoped>
@import url(../assets/appColor.less);

.home {
    padding: 10px;
    padding-top: 0px;

    h2 {
        font-size: 25px;
        text-align: center;
        margin-bottom: 15px;
    }

    .category {
        position: sticky;
        top: 0px;
        border-bottom: 1px solid #ccc;
        margin-bottom: 10px;
        background-color: white;

        ul {
            display: flex;
            flex-wrap: wrap;

            li {
                min-width: 65px;
                display: flex;
                flex-direction: column;
                align-items: center;
                margin: 10px;
                border-radius: 10px;

                img {
                    // box-shadow: 0px 2px 5px 0 rgba(0, 0, 0, 0.5);
                    height: 50px;
                    width: 50px;
                }
                p {
                    font-size: 16px;
                }
            }

            .active {
                box-shadow: 2px 5px 5px 2px @bgcolor;
                // p{font-weight: bold;}
                // background-color: skyblue;
            }
        }
    }

    .exam-list {
        ul {
            li {
                width: 100%;
                padding: 10px;
                margin-bottom: 15px;
                font-size: 25px;
                font-weight: bold;
                border-bottom: 4px solid #ccc;
                border-radius: 9px;
            }
        }
    }
}
</style>

<script lang="ts" setup>
import { ref, reactive, watch } from 'vue'
import api from '../api/request'
import http from '../api/index'
import { useRouter } from 'vue-router'
const $router = useRouter()
// 导入pinia
import { useExamStore } from '../stores/exam'
import { storeToRefs } from 'pinia'
// 记录存储对象
const examStore = useExamStore()
// 考试分类数据.........................................................
// // 方法1 (涉及异步请求，不推荐，刷新页面会导致数据丢失)
// // 调用状态管理对象的方法获取数据
// examStore.getCategory();
// // 把状态库中的数据赋值给categoryList
// let categoryList = ref<any>([]);
// categoryList.value= examStore.category;
// // console.log(categoryList.value);

// 方法2 (推荐)
examStore.getCategory();
let categoryList:any = storeToRefs(examStore).category


// 这个方法刷新页面会丢失数据
// categoryList.value= examStore.category;

// 方法3 (推荐)
// 定义考试分类数据
// let categoryList = ref<any>([]);
// watch(categoryList,()=>{
//     api.category_list()
//     .then(res=>{
//         if(res.code==200){
//             categoryList.value= res.result;
//         }
//     })

// },{immediate:true})

// 试卷列表数据...........................................
// 对应分类id
let id = ref(27)

// 调用状态管理对象的方法
examStore.exam_list_by_category(id.value);
// 把状态库中的数据赋值给examlist
let examlist:any = storeToRefs(examStore).examList

// 监听id变化，展示对应试卷列表
watch(id,()=>{
    examStore.exam_list_by_category(id.value);
    examlist.value= examStore.examList;
},{immediate:true})

// 点击高亮改变id,且展示对应试卷列表
const testList = (item: any = {}) => {
    id.value = item.id;
}
// 携带参数跳转到详情页

const toDerails = (item: any = {}) => {
    $router.push({
        name: 'details',
        query: {
            eid: item.eid
        }
    })
}

</script>